<template>
	<view style="height: 100%;" class="bg-gray">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">收到回复</block>
		</cu-custom>
		<!-- 本评论 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="" style="width: 100;height: 100%;">
				<!-- 全部回复 -->
				<view v-for="(item,index) in dataList" :key="index">
					<user-comment-item @detailParent="jumpCommentDetail(item.parent_comment)" @lock="commentLockAction(item,index)" :comment="item" @detail="jumpCommentDetail(item)" @report="reportCommentAction(item)" @reply="replyCommentAction(item)" @praise="praiseAction(item,index,false)" ></user-comment-item>
				</view>
			</view>
		</mescroll-body>
		<view class="cu-modal" :class="modalStatus">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{isReportMode?'举报':'回复'}}{{isReportPost?'帖子':'评论'}}</view>
					<view class="action" @tap="modalStatus=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl flex justify-start" style="flex-direction: column;">
					<view v-if="isReportPost==false">
						<view class="flex justify-start align-center padding-bottom">
							<text class="text-grey text-sm">#{{form.replyUser}} : {{form.replyCommentContent}}</text>
						</view>
					</view>
					<view class="flex justify-center align-center padding-bottom-lg" style="width: 100%;">
						<textarea v-if="modalStatus.length > 0"  class="bg-white radius padding-top padding-left text-left" v-model="form.textInput"
							placeholder="请输入内容"></textarea>
					</view>
					<view class="action flex justify-center padding bg-white" style="width: 100%;" @tap="commitOperate">
						<button class="cu-btn round bg-blue" style="width: 90%;">提交</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UserCommentItem from '@/components/user-comment-item.vue';
	import {
		getTimeDistance,
		chunk
	} from '@/api/utils.js'
	import {
		getUserReplyList,
		reportComment,
		replyComment,
		praiseComment,
		markReplyRead,
		lockComment
	} from '@/api/api.js'
	import {
		markRead
	} from '@/api/statusCache.js'
	import {
		isLogin
	} from '@/api/auth.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import config from '@/api/config.js'
	export default {
		components: {
			UserCommentItem
		},
		mixins: [MescrollMixin],
		data() {
			return {
				commentId:null,
				comment:null,
				modalStatus: '',
				isReportMode: false,
				form: {
					replyUser: '',
					replyCommentContent: '',
					replyCommentId: null,
					textInput: '',
				},
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				requestStatus: {
					isPraising: false,
					isFavoriting: false,
				},
			}
		},
		methods: {
			commentLockAction(comment,index)
			{
				let that = this
				uni.showModal({
					title:'审核评论提示',
					content:'是否确定要将评论击飞??',
					cancelText:'手滑了',
					confirmText:'击飞评论',
					success(res) {
						if(res.confirm) {
							uni.showLoading({
								title:'正在操作...'
							})
							lockComment(comment.comment_id).then(res=>{
								uni.hideLoading()
								uni.showToast({
									title:'操作成功'
								})
								that.dataList[index].audit_status = -1
							}).catch(error=>{
								uni.hideLoading()
							})
						}
					}
				})
			},
			jumpCommentDetail(comment) {
				uni.navigateTo({
					url: '/pages/always/comment-detail/comment-detail?commentId=' + comment.comment_id
				})
			},
			commitOperate() {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				this.modalStatus = null
				uni.showLoading({
					title: '正在提交...'
				})
				if (this.isReportMode) {
					reportComment(this.form.replyCommentId, this.form.textInput).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: '举报成功'
						})
					}).catch(error => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交失败'
						})
					})
				} else {
					replyComment(this.form.replyCommentId, this.form.textInput).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: '回复成功'
						})
						this.dataList.unshift(res.data)
					}).catch(error => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交失败'
						})
					})
				}
			},
			praiseAction(comment,index,isHostComment) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				if (this.requestStatus.isPraising) {
					return
				}
				this.requestStatus.isPraising = true
				praiseComment(comment.comment_id).then(res => {
					if (comment.is_praise == 0) {
						if(isHostComment) {
							comment.is_praise = 1
							comment.praise_count += 1
						}else{
							this.dataList[index].is_praise = 1
							this.dataList[index].praise_count += 1
						}
						uni.showToast({
							title: '点赞成功'
						})
						this.requestStatus.isPraising = false
					} else {
						if (isHostComment) {
							comment.is_praise = 0
							comment.praise_count -= 1
						} else {
							this.dataList[index].is_praise = 0
							this.dataList[index].praise_count -= 1
						}
						uni.showToast({
							icon: 'none',
							title: '已取消点赞'
						})
						this.requestStatus.isPraising = false
					}
				}).catch(error => {
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: '提交失败'
					})
					this.requestStatus.isPraising = false
				})
			},
			replyCommentAction(comment) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/comment/comment?postId=' + comment.post_id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('replyComment', comment)
					}
				})
			},
			reportCommentAction(comment) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				this.form.replyCommentId = comment.comment_id
				this.form.replyUser = comment.author.nickname
				this.form.replyCommentContent = comment.content
				this.isReportMode = true
				this.modalStatus = 'show'
			},
			getDataList(pageIndex, pageSize) {
				getUserReplyList(pageIndex, pageSize).then(res => {
					res.data.list.forEach(item => {
						item.show_time = getTimeDistance(item.created_at)
						item.at_user_list = chunk(item.at_user_list,3)
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList)
					}
					console.log('page length:' + pageList.length)
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
					let commentIds = res.data.id_list
					if(commentIds && commentIds.length > 0) {
						markReplyRead(commentIds).then(res=>{
							console.log('标记回复已读成功')
						}).catch(error=>{
							console.log('标记回复已读失败')
						})
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			},
		}
	}
</script>

<style>
	@import '@/static/style/thorui.css';

	.container {
		padding: 30rpx 0 80rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-title {
		padding: 55rpx 0 30rpx 0;
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.tui-flex {
		align-items: center;
	}

	.tui-triangle {
		margin-right: 30rpx;
	}

	.tui-checkbox {
		margin-left: 60rpx;
	}

	.tui-top40 {
		margin-top: 40rpx;
	}

	.tui-pl-30 {
		padding-left: 30rpx;
	}
</style>
